<template>
  <div id="question">
    <!--使用公共头部区-->
    <c-header :classId1="className"></c-header>
    <!--创建问卷区-->
    <div class="q-create">
      <el-row>
        <el-col :span="8">
          <img src="../../../static/images/ques1.jpg" />
          <p>创建空白问卷<br>从一份空白卷开始创建</p>
          <router-link to="/quesEdit">
            <button>开始</button>
          </router-link>
        </el-col>
        <el-col :span="8" class="q-active">
          <img src="../../../static/images/ques2.jpg" />
          <p>选择问卷模板<br>使用彩问卷提供的专业模板</p>
          <router-link to="/quesTemplate">
            <button>开始</button>
          </router-link>
        </el-col>
        <el-col :span="8">
          <img src="../../../static/images/ques3.jpg" />
          <p>管理题库<br>对题库进行增删改</p>
          <router-link to="/quesAdmin">
            <button>开始</button>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <!--模板推荐区-->
    <div class="q-recom">
      <div class="r-header"><span>为您推荐</span></div>
      <div class="r-content">
        <el-row>
          <el-col :span="4" class="r-first" @click.native="changeMask()">1、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
          <el-col :span="4" class="l-first">6、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="r-first">2、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
          <el-col :span="4" class="l-first">7、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="r-first">3、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
          <el-col :span="4" class="l-first">8、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="r-first">4、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
          <el-col :span="4" class="l-first">9、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="r-first">5、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
          <el-col :span="4" class="l-first">10、满意度问卷模板</el-col>
          <el-col :span="4" :offset="4" class="r-small">34个问题/4页</el-col>
        </el-row>
      </div>
    </div>
    <!--遮罩层区域-->
    <transition name="fade">
    <div class="hidden mask" v-if="ismask">
      <div class="hiques-content">
        <ul>
          <li>
            <h5>{{hqtitle}}</h5>
            <div class="hq-radio">
              <el-radio v-model="radio" label="1">非常不满意</el-radio>
              <el-radio v-model="radio" label="2">不满意</el-radio>
              <el-radio v-model="radio" label="3">一般</el-radio>
              <el-radio v-model="radio" label="4">非常满意</el-radio>
              <el-radio v-model="radio" label="5">比较满意</el-radio>
            </div>
          </li>
          <li>
            <h5>{{hqtitle1}}</h5>
            <div class="hq-radio">
              <el-radio v-model="radio1" label="1">非常不满意</el-radio>
              <el-radio v-model="radio1" label="2">不满意</el-radio>
              <el-radio v-model="radio1" label="3">一般</el-radio>
              <el-radio v-model="radio1" label="4">非常满意</el-radio>
              <el-radio v-model="radio1" label="5">比较满意</el-radio>
            </div>
          </li>
        </ul>
        <!--关闭按钮-->
        <span class="close el-icon-close" @click="ismask=!ismask"></span>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
  //导入公共头部组件
  import cHeader from '../common/quesHeader.vue';
  export default {
    data() {
      return {
        className: 'active',
        isquestion: true,
        ismask: false,
        radio: '1',
        radio1: '1',
        hqtitle: '1.请问您对管理处人员的服务态度感到？',
        hqtitle1: '2.请问您对小区的环境感到如何？'
      }
    },
    methods: {
      changeMask() {
        this.ismask = true;
      }
    },
    components: {
      "c-header": cHeader
    }
  }
</script>

<style scoped="scoped">
  #question {
    min-width: 960px;
    font-family: "微软雅黑";
  }
  /*创建问卷区*/  
  .q-create .el-row {
    height: 260px;
    background-color: rgb(50, 140, 222);
    box-sizing: border-box;
    padding-top: 40px;
    overflow: hidden;
  }
  .q-create .el-col {
    overflow: hidden;
    text-align: center;
  }
  .q-active {
    background-color: rgb(85, 163, 228);
    height: 260px;
    margin-top: -40px;
    box-sizing: border-box;
    padding-top: 40px;
  }
  .q-create img {
    height: 80px;
    width: 100px;
    background-color: #fff;
  }
  .q-create p {
    margin: 3px 0 12px 0;
    color: #fff;
    line-height: 22px;
    font-size: 15px;
  }
  .q-create button {
    height: 35px;
    width: 140px;
    background-color: #fff;
    text-align: center;
    border: none;
    border-radius: 5px;
    color: rgba(0, 0, 0, .7);
    letter-spacing: 2px;
  }
  /*模板推荐区*/  
  .q-recom {
    height: auto;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 30px;
    padding-left: 15px;
  }
  .q-recom .r-first {
    text-align: left;
  }
  .q-recom .r-first:hover {
    cursor: pointer;
    color: #1580B6;
  }
  .q-recom .l-first:hover {
    cursor: pointer;
    color: #1580B6;
  }
  .q-recom .r-header span {
    font-family: "微软雅黑";
    font-size: 18px;
    color: #1580B6;
    letter-spacing: 2px;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    width: 99%;
  }
  .q-recom .r-content {
    padding-top: 20px;
    box-sizing: border-box;
    font-size: 15px;
    letter-spacing: 1px;
    color: rgba(0, 0, 0, .7);
  }
  .q-recom .el-col {
    height: 35px;
    line-height: 35px;
    overflow: hidden;
  }
  .r-small {
    color: #ccc;
    font-size: 14px;
  }
  /*遮罩层*/  
  #question .hidden {
    display: none;
  }
  #question .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .7);
    z-index: 99;
    display: block;
  }
  #question .hiques-content {
    position: absolute;
    left: 50%;
    top: 50%;
    /*点击单选按钮会出现页面抖动效果,使用margin负值代替*/
    /*transform: translate(-50%, -50%);*/
    width: 80vw;
    height: 80vh;
    margin-left: -40vw;
    margin-top: -40vh;
    background-color: #fff;
    overflow: auto;
    border-radius: 5px;
    box-shadow: 1px 1px 8px #000;
  }
  #question .hiques-content ul {
    list-style: none;
  }
  .hiques-content ul li {
  	margin-bottom: 20px;
  }
  .hiques-content li h5 {
    margin: 0;
    margin-bottom: 5px;
    padding: 0;
  }
  .hiques-content .close {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 25px;
  }
  .hiques-content .close:hover {
    color: rgba(255,0,0,.6);
    cursor: pointer;
    transition: color .2s ease-in;
  }
  /*遮罩层动画*/
	.fade-enter {
		opacity: 0;
	}
	.fade-enter-active {
		transition: opacity 1s;
	}
	.fade-leave-to {
		opacity: 0;
	}
	.fade-leave-active {
		transition: opacity 1s;
	}
</style>